<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title></title>
 <#include "/header.ftl">
</head>
<body>
<div id="app">
    <div style="padding-left:400px;padding-top:20px">
        <h3 style="padding-left:250px;padding-bottom:80px;">请&nbsp;&nbsp;&nbsp;&nbsp;假&nbsp;&nbsp;&nbsp;&nbsp;条</h3>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="申请类型" prop="transactionReasonRequest">
                <el-input v-model="ruleForm.transactionReasonRequest" style="width:500px"></el-input>
            </el-form-item>
            </el-form-item>
            <el-form-item label="申请时间"  required>
                <el-col :span="11">
                    <el-form-item prop="transactionApplyDate">
                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.transactionApplyDate" style="width:500px"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="申请时长" prop="transactionHowLong">
                <el-input v-model="ruleForm.transactionHowLong" style="width:500px"></el-input>
            </el-form-item>
            <el-form-item label="申请原因" prop="transactionReasonText">
                <el-input type="textarea" v-model="ruleForm.transactionReasonText" style="width:500px"></el-input>
            </el-form-item>
            <el-form-item style="padding-left:150px;">
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
<#include "/footer.ftl">
<script>
    let _this=new Vue({
        el:'#app',
        data:{
            ruleForm: {
                transactionReasonRequest: '',
                transactionApplyDate: '',
                transactionHowLong: '',
                transactionReasonText: ''
            },
            rules: {
                transactionReasonRequest: [
                    { required: true, message: '请输入请假类型', trigger: 'blur' },
                    { max: 20, message: '长度不超过20个字', trigger: 'blur' }
                ],
                transactionApplyDate: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                transactionHowLong: [
                    { required: true, message: '请输入请假时长，如：2天', trigger: 'blur' },
                    { max: 20, message: '长度不超过10个字', trigger: 'blur' }
                ],
                transactionReasonText: [
                    { required: true, message: '请填写请假原因', trigger: 'blur' }
                ]
            }
        },
        created:function () {

        },
        methods: {
            submitForm(){

                $.ajax({
                    type:'post',
                    url:'/api/student/transaction/save',
                    data:this.ruleForm,
                    dataType:'json',
                    success:function (res) {
                        if(res.status == 200){
                            _this.$message({
                                showClose: true,
                                message: res.message,
                                type: 'success'
                            });
                        }else{
                            _this.$message({
                                showClose: true,
                                message: res.message,
                                type: 'error'
                            });
                        }
                    },
                    error : function(error) {
                        console.log('接口不通' + error);
                    }
                })




            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }


        }
    })
</script>
</body>
</html>
